<template>
    <div class="content">
        <!-- 操作按钮 -->
        <div>
            <el-row>
                <el-col>
                    <el-button icon="el-icon-plus"
                               type="primary"
                               plain
                               size="mini"
                               @click="add">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 列表 -->
        <div>
            <el-table :data="formInfos">
                <el-table-column label="ID"
                                 align="center"
                                 prop="id"></el-table-column>
                <el-table-column label="库名称"
                                 align="center"
                                 prop="department"></el-table-column>
                <el-table-column label="操作"
                                 align="center">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit"
                                   type="warning"
                                   plain
                                   size="mini"
                                   @click="update(scope.row)">修改</el-button>
                        <el-button icon="el-icon-delete"
                                   type="danger"
                                   plain
                                   size="mini"
                                   @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 弹出框 -->
        <div>
            <el-dialog :visible.sync="dialogVisible"
                       :title="title"
                       width="30%"
                       :before-close="beforeClose">
                <el-form v-model="form">
                    <el-form-item label="库名称：">
                        <el-input v-model="form.department"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submit">确定</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getService, addService, updateService, deleteService } from "@/api/ServiceLib"
export default {
    data () {
        return {
            formInfos: [
            ],
            // 弹出框
            dialogVisible: false,
            // 头信息
            title: "",
            isId: null,
            form: {
                id: null,
                department: null
            }
        }
    },
    methods: {
        beforeClose () {
            this.isId = null;
            this.form.id = null;
            this.form.department = null;
            this.dialogVisible = !this.dialogVisible;
        },
        add () {
            this.dialogVisible = !this.dialogVisible;
            this.title = "新增库";
        },
        update (row) {
            this.dialogVisible = !this.dialogVisible;
            this.isId = row.id
            this.title = "修改库"
            this.form.department = row.department
            this.form.id = row.id
        },
        remove (row) {
            deleteService(row.id).then(resData => {
                console.log(resData)
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.get();
            })
        },
        submit () {
            if (this.isId == null) {
                // 新增
                addService(this.form).then(resData => {
                    this.beforeClose();
                    this.$message({
                        message: '插入成功',
                        type: 'success'
                    });
                    this.get();
                })
            } else {
                // 更新
                updateService(this.form).then(resData => {
                    this.beforeClose();
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.get();
                })
            }
        },
        get () {
            getService().then(resData => {
                this.formInfos = resData.elements
            })
        }

    },
    created () {
        this.get();
    }
}
</script>

<style scoped>
.content {
    margin: 0;
    padding: 0;
}
</style>